import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import Swiper from 'swiper';
import { connect } from 'react-redux';
import {mall_them_hos_det,mall_them_doc_show,mall_them_hos_servItem} from '../../actions';
import {getHosImg,getDocImg,getServImg} from '../../actions/ActionTypes';

const hos_det_adr = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/hos_det_adr.jpg');
const mall_vip = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/mall_vip.png');

let hos_det_c_swiper,hos_det_h_swiper;
var M_t_doc = React.createClass({
  componentDidMount:function(){
    const {dispatch} = this.props;
    dispatch(mall_them_hos_det(this.props.id));
    dispatch(mall_them_doc_show(this.props.id));
    dispatch(mall_them_hos_servItem({hospitalId:this.props.id}));


    hos_det_h_swiper = new Swiper('.hos_det_h_swiper',{
      paginationClickable: true,
      autoplay:2800,
      speed:800,
      calculateHeight:true,
      onInit:function(){
        $('.hos_det_h_swiper').find('.pagination var').text(parseInt(hos_det_h_swiper.activeIndex)+1);
        $('.hos_det_h_swiper').find('.pagination em').text($('.hos_det_h_swiper .swiper-slide').length)
      },
      onTouchStart:function(){
        hos_det_h_swiper.stopAutoplay();
      },
      onTouchEnd:function(){
        hos_det_h_swiper.startAutoplay();
      },
      onSlideChangeStart:function(myswiper){
        $('.hos_det_h_swiper').find('.pagination var').text(parseInt(hos_det_h_swiper.activeIndex)+1)
      }
    });
    //中间
    hos_det_c_swiper = new Swiper('.hos_det_c_swiper',{
      paginationClickable: true,
      slidesPerView: 'auto',
      calculateHeight:true,
    });

    $('.m_hos_det .more').each(function(){
      let statu = $(this).statu = false;
      let h = $(this).parent('.item').find('.txt').height();
      $(this).click(function(){
        statu = !statu;
        let my_em =$(this).find('em');
        let this_txt = $(this).parent('.item').find('.txt');
        let this_h = this_txt.find('.wrapper').height();
        if(statu){
          my_em.html('&#9650;')
          $(this).parent('.item').find('.txt').height(this_h)
        }else{
          my_em.html('&#9660;')
          $(this).parent('.item').find('.txt').height(h)
        }

      })
    })

  },
  componentWillReceiveProps:function(newProps){

  },
  componentDidUpdate:function(){
     hos_det_h_swiper.reInit();
     hos_det_c_swiper.reInit();

  },

  render:function(){
    //通过医院id摘出此医院的信息
    let _this = this,
        this_hos_arr = this.props.hos_list.filter(function(item,index,array){
      return (item.hospitalId == _this.props.id)
    });

    var hos_item = this_hos_arr[0] || [],
        hospitalPic = hos_item.hospitalPic || [],
        hospitalPic = hospitalPic.toString().split(',') || [],
        hospitalSmallLogo = hos_item.hospitalSmallLogo || '',
        hospitalSmallLogo = hospitalSmallLogo.length !=0?getHosImg(hos_item.hospitalSmallLogo.toString(),'_200_200',_this.props.id):"https://dummyimage.com/750x480/fff/000&text=waiting",
        doc_show = this.props.doc_show || [],
        serv_arr = this.props.serv_item;
        console.log(doc_show);
    return(
      <div className="m_hos_det">
       <header>
        <div className="hos_det_h_swiper swiper-container">
          <div className="swiper-wrapper" style={{"height":"4.8rem"}}>
            {
              hospitalPic.map(function(item,index){
                let img_src =getHosImg(item,'_750_480',_this.props.id);
                if(item.length == 0)return false; //如果图片名称为空不遍历此项
                return(
                  <div className="swiper-slide">
                    <ImageLazy src={img_src} style={{height:"4.8rem"}} />
                  </div>
                )
              })
            }
          </div>
          <div className="pagination"><var>8</var>/<em>8</em></div>
        </div>
        <div className="hos_logo border_b1">
          <div className="left box"><span style={{'background-image':"url("+ hospitalSmallLogo + ")"}}></span></div>
          <div className="right">
            <h4>{hos_item.hospitalName}</h4>资质：{hos_item.hospitalClass=="1"?"公立":"民营"}
          </div>
        </div>
        <div className="address border_b1">
          <ImageLazy src={hos_det_adr} />{hos_item.hospitalAddress}
        </div>
       </header>

       <div className="contant">
       <div className="item border_b1">
         <h3 className="tit_sty1">
           医院介绍<br/><small>Hospital introduction</small>
         </h3>
         <div className="txt box">
           <div className="wrapper">
           <p>{hos_item.hospitalRemark}</p>
           </div>
         </div>
         <a href="javascript:void(0)" className="more">
           MORE <em>&#9660;</em>
         </a>
        </div>
        <div className="item border_b1">
          <h3 className="tit_sty1">
            专家团队<br/><small>Expert team</small>
          </h3>
          <div className="swiper-container common_swiper hos_det_c_swiper">
            <div className="swiper-wrapper">
              {
                doc_show.map(function(item,index){
                  console.log(item.certificatePic);
                  let img_src =getDocImg(item.certificatePic,'_750_480',_this.props.id,item.doctorId);
                  return(
                    <div className="swiper-slide">
                      <ImageLazy src={img_src} />
                    </div>
                  )
                })
              }
            </div>
          </div>
        </div>

        <div className="item border_b1">
          <h3 className="tit_sty1">
            服务项目<br/><small>Service Items</small>
          </h3>
          <div className="text_list">
            {
              serv_arr.map(function(item,index){
                let img_src =getServImg(item.itemImage,'_200_200',_this.props.id,item.itemId);
                return(
                  <NavLink to={'/servItem/det/' + item.itemId} className="common_item border_b1">
                    <div className="left">
                      <img src={img_src} style={{height:'1rem','width':'1.38rem'}} />
                      {/* <em style={{'backgroundImage':'url('+ img_src + ')'}}></em> */}
                    </div>
                    <div className="right">
                      <h4>{item.itemName} {item.subtitle}</h4>
                      <p>
                        {hos_item.hospitalAddress} <ImageLazy src={mall_vip} style={{"width":".26rem"}} />
                      </p>
                      <div className="price"><span>¥ {item.sellingPrice}</span></div><s className="o_price">¥ {item.originalPrice}</s>
                    </div>
                  </NavLink>
                )
              })
            }

          </div>
        </div>

       </div>

       <div className="fix_tel box border_t1">
         <a href={"tel:" + hos_item.contactsTel}>电话咨询</a>
       </div>

      </div>
    )
  }
})

let mapStateToProps = (state,ownProps)=>{

  let hos_list = state.mall.mall_them_hos_det || [];
  let doc_show = state.mall.mall_them_doc_show || [];
  let serv_item = state.mall.mall_them_hos_servItem || [];
  // console.log(doc_show)
  return{
    hos_list,
    doc_show,
    serv_item,
    id:ownProps.params.id
  }
}

export default connect(mapStateToProps)(M_t_doc);
